<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'">
            <d-col [dSpan]="20">
              <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'">
                <d-col>
                  <div class="da-header-item-label">{{ 'opscenter.project' | translate }}:</div>
                </d-col>
                <d-col style="width: 164px">
                  <d-select
                    [options]="projectList"
                    name="project"
                    [filterKey]="'label'"
                    [allowClear]="true"
                    [(ngModel)]="searchFormConfig.project"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    (valueChange)="refreshTable()"
                  >
                    <ng-template let-option="option"> {{ option['label'] }} </ng-template>
                  </d-select>
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'opscenter.jobCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="jobCode" [(ngModel)]="searchFormConfig.jobCode" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'opscenter.jobInstanceId' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="jobInstanceId" [(ngModel)]="searchFormConfig.jobInstanceId" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'opscenter.timeRange' | translate }}:</div>
                </d-col>
                <d-col>
                  <div class="devui-input-group devui-dropdown-origin" style="width: 310px">
                    <input
                      class="devui-input devui-form-control"
                      placeholder=""
                      name="timeRange"
                      [(ngModel)]="searchFormConfig.timeRange"
                      (click)="dateRangePicker.toggle()"
                      autocomplete="off"
                      dDateRangePicker
                      #dateRangePicker="dateRangePicker"
                      (selectedRangeChange)="refreshTable()"
                      [showTime]="true"
                      [dateFormat]="'y-MM-dd HH:mm:ss'"
                    />
                    <div class="devui-input-group-addon" (click)="dateRangePicker.toggle()">
                      <em class="icon icon-calendar"></em>
                    </div>
                  </div> </d-col></d-row
            ></d-col>
            <d-col [dSpan]="4" style="text-align: end">
              <d-button-group>
                <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshTable()">{{
                  'app.common.operate.query.label' | translate
                }}</d-button>
                <d-button style="margin-right: 8px" bsStyle="common" (btnClick)="reset()">{{
                  'app.common.operate.reset.label' | translate
                }}</d-button>
                <d-button icon="icon-chevron-down" bsStyle="text" *ngIf="!isOpen" (btnClick)="buttonToggle(true)"> {{
                  'app.common.operate.unpack.label' | translate
                }} </d-button>
                <d-button icon="icon-chevron-up" bsStyle="text" *ngIf="isOpen" (btnClick)="buttonToggle(false)">  {{
                  'app.common.operate.packup.label' | translate
                }} </d-button>
              </d-button-group>
            </d-col>
          </d-row>

          <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'" style="padding-top: 6px" *ngIf="isOpen">
            <d-col [dSpan]="20">
              <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'">
                <d-col>
                  <div class="da-header-item-label">{{ 'opscenter.jobInstanceState' | translate }}:</div>
                </d-col>
                <d-col style="width: 164px">
                  <d-select
                    [options]="jobInstanceStateList"
                    name="jobInstanceState"
                    [filterKey]="'label'"
                    [allowClear]="true"
                    [(ngModel)]="searchFormConfig.jobInstanceState"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    (valueChange)="refreshTable()"
                  >
                    <ng-template let-option="option"> {{ option['label'] }} </ng-template>
                  </d-select>
                </d-col>
              </d-row>
            </d-col>
          </d-row>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content" id="dataTableContent">
            <d-data-table
              #dataTable
              [dataSource]="dataTableDs"
              [resizeable]="true"
              [checkable]="false"
              [tableLayout]="'fixed'"
              [scrollable]="true"
              [fixHeader]="true"
              [(multiSort)]="sortedColumn"
              (multiSortChange)="sortChange($event)"
              [showSortIcon]="true"
              [showFilterIcon]="true"
              [onlyOneColumnSort]="true"
              (rowCheckChange)="getDataTableCheckedStatus()"
              (checkAllChange)="getDataTableCheckedStatus()"
            >
              <d-column field="jobCode" header="{{ 'opscenter.jobCode' | translate }}" [width]="'200px'" [fixedLeft]="'0px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="project" header="{{ 'opscenter.project' | translate }}" [width]="'120px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.projectCode }}</ng-template>
                </d-cell>
              </d-column>
              <d-column
                field="cluster"
                [filterable]="true"
                [filterList]="clusterList"
                [filterMultiple]="false"
                (filterChange)="clusterFilter($event)"
                header="{{ 'opscenter.cluster' | translate }}"
                [width]="'120px'"
              >
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.clusterName }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobInstanceId" header="{{ 'opscenter.jobInstanceId' | translate }}" [width]="'280px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobInstanceState" header="{{ 'opscenter.jobInstanceState' | translate }}" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.label }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="startTime" [sortable]="true" header="{{ 'opscenter.startTime' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="endTime" [sortable]="true" header="{{ 'opscenter.endTime' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="duration" [sortable]="true" header="{{ 'opscenter.duration' | translate }}" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem / 1000 }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}" [fixedRight]="'0px'" [width]="'80px'">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group over-flow-ellipsis">
                      <a [href]="rowItem.jobLogUrl" target="_blank">
                        <d-button
                          *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.opscenterBatchSelect)"
                          icon="icon-share"
                          bsStyle="text-dark"
                          title="{{ 'opscenter.log.info' | translate }}"
                        ></d-button
                      ></a>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <ng-template #noResultTemplateRef>
                <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
              </ng-template>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <div class="footer-left"></div>
            <div class="footer-right">
              <d-pagination
                size=""
                [total]="pager.total"
                [(pageSize)]="pager.pageSize"
                [(pageIndex)]="pager.pageIndex"
                [canViewTotal]="true"
                [canChangePageSize]="true"
                [canJumpPage]="true"
                [maxItems]="5"
                (pageIndexChange)="refreshTable()"
                (pageSizeChange)="refreshTable()"
              >
              </d-pagination>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>
  </div>
</div>
